import Taro, {Component} from '@tarojs/taro';
import {View, Text, Button, Image} from '@tarojs/components';
import {connect} from '@tarojs/redux';
import {showDrawer, hideDrawer ,changeCata} from '../../actions/menu';
import { AtDrawer } from 'taro-ui';
import './menu.less';

@connect(function(store){
    return {...store.menu}
},function(dispatch){
    return {showMenu() {
        dispatch(showDrawer())
    },
    changeCata(cata) {
        dispatch(changeCata(cata))
    },
    hideDrawer() {
        dispatch(hideDrawer())
    }}
})
class Menu extends Component {
    // 显示抽屉
    showDrawer() {
        this.props.showMenu && this.props.showMenu();
    }
    // 点击用户图标
    toUser() {
        Taro.navigateTo({url: '/pages/login/index'})
    }

    getItems(cataData) {
        return cataData.map(item => item.value);
    }
    // 点击分类
    clickCata(i) {
        let {cataData} = this.props;
        let clickCata = cataData[i];  // 获取点击项的数据
        if (clickCata.key !== this.props.currentCata.key) {
            this.props.changeCata && this.props.changeCata(clickCata);  // 点击分类 触发点击分类方法
        }
    }
    // 关闭抽屉时触发
    closeDrawer() {
        this.props.hideDrawer && this.props.hideDrawer();
    }

    render() {
        let {showDrawer, cataData} = this.props;
        let items = this.getItems(cataData);  // 获取分类列表
        return (<View className='topiclist-menu'>
            <AtDrawer 
                onItemClick={this.clickCata.bind(this)}
                onClose={this.closeDrawer.bind(this)}
                style='position:absolute;'
                show={showDrawer}
                items={items}
            />
            <Image onClick={this.showDrawer.bind(this)} className='image' src={require('../../assets/img/cata.png')} />
            <Text>{this.props.currentCata ? this.props.currentCata.value : ''}</Text>
            <Image onClick={this.toUser.bind(this)} className='image' src={require('../../assets/img/login.png')} />

        </View>)
    }
}

export default Menu;